import Guide from '~/components/layout/guide'
import { Image } from '~/components/media'
import Caption from '~/components/text/caption'
import Note from '~/components/text/note'
import Link from '~/components/text/link'

export const meta = {
  title: 'Automatic Deployments with ZEIT Now for GitLab',
  description:
    'Setup ZEIT Now for GitLab and get automatic deployments and preview URLs for each push.',
  published: '2019-04-01T09:03:14.819Z',
  authors: ['arunoda', 'timothy'],
  url: '/guides/getting-started-with-now-for-gitlab',
  editUrl: 'pages/guides/getting-started-with-now-for-gitlab.mdx',
  lastEdited: '2020-01-20T21:51:41.000Z'
}

The [ZEIT Now for GitLab integration](/docs/v2/integrations/now-for-gitlab) provides you with automatic deployments for each push to a project, automatic preview URLs for pushes to the default branch, and instant rollbacks for reverts.

This guide will walk you through how to set up the ZEIT Now for GitLab integration for your projects.

## Step 1: Set Up a ZEIT Now for GitLab Project

To deploy a project with ZEIT Now for GitLab, you must first have a project on GitLab.

[Create a new GitLab project](https://docs.gitlab.com/ee/gitlab-basics/create-project.html) with a file called `index.html` with the following contents:

```html
<body>
  <h1>Hello World</h1>
</body>
```

Push this file to your GitLab project so you have one file inside of it.

<Image
  src={`${process.env.ASSETS}/guides/getting-started-with-now-for-gitlab/gitlab-project.png`}
  width={2152/2.5}
  height={1450/2.5}
  oversize
/>
<Caption style={{marginTop: '-64px'}}>A simple GitLab project setup.</Caption>

## Step 2: Connect ZEIT Now to Your GitLab User and Project

For ZEIT Now to make automatic deployments and preview URLs, it needs access to your GitLab account and its associated projects.

Connect your GitLab account through your [account settings](/account).

If you don't have a ZEIT account, visit <https://zeit.co/signup> and click "Sign Up with GitLab".

### Link Your GitLab Projects

From the [account settings](/account) section where you connected your GitLab account, or from the GitLab tab on <https://zeit.co/new>, select your GitLab project from the dropdown and click "link" to link it.

<Image
  src={`${process.env.ASSETS}/guides/getting-started-with-now-for-gitlab/new-project-link.png`}
  width={2152/2.5}
  height={1450/2.5}
  oversize
/>
<Caption style={{marginTop: '-64px'}}>Linking a GitLab project.</Caption>

With a project linked, no further setup is required on ZEIT.

## Step 3: Using ZEIT Now for GitLab

With configuration done, all future commits from your linked projects will have [automatic deployments for each push](#deployments-for-each-push), [merge requests](#deployments-and-preview-urls-for-merge-requests), and [automatic updates for production domains](#deploying-to-production).

### Deployments For Each Push

Now, visiting your [commits](https://gitlab.com/now-examples/hello-world/commits/master) page in GitLab, you will see something like this:

<Image
  src={`${process.env.ASSETS}/guides/getting-started-with-now-for-gitlab/commits-page.png`}
  width={2080/2.5}
  height={1392/2.5}
  oversize
/>
<Caption style={{marginTop: '-40px'}}>A deployed commit using ZEIT Now for GitLab.</Caption>

This green status symbol indicates that ZEIT Now successfully deployed your commit.

Clicking the [commit](https://gitlab.com/now-examples/hello-world/commit/9fade7c749778b69a71ac52151a4d2cd94e7e92a) itself, you will see a comment that holds a unique deployment URL to test and share the specific commit build:

<Image
  src={`${process.env.ASSETS}/guides/getting-started-with-now-for-gitlab/deploy-comment.png`}
  width={2080/2.5}
  height={1392/2.5}
  oversize
/>
<Caption style={{marginTop: '-40px'}}>A unique URL for an individual commit.</Caption>

Each commit will result in a unique URL just like the above.

### Deployments and Preview URLs for Merge Requests

[Merge requests](https://docs.gitlab.com/ee/user/project/merge_requests/) are a way to submit changes to a project without pushing directly to the default branch. This comes in handy when you're working on a feature that is either in progress or needs a review before being launched into production.

There are multiple ways to [create a merge request](https://docs.gitlab.com/ee/gitlab-basics/add-merge-request.html), however, to test, create a merge request by editing the `index.html` file, edit the target branch, and then click "Start a new merge request".

<Image
  src={`${process.env.ASSETS}/guides/getting-started-with-now-for-gitlab/create-merge-request.png`}
  width={2080/2.5}
  height={1392/2.5}
  oversize
/>
<Caption style={{marginTop: '-40px'}}>Creating a merge request from GitLab's UI.</Caption>

After you commit and create the merge request, you will get a [new view](https://gitlab.com/now-examples/hello-world/merge_requests/1) that will start a deployment pipeline for your changes:

<Image
  src={`${process.env.ASSETS}/guides/getting-started-with-now-for-gitlab/merge-request-pipeline.png`}
  width={2080/2.5}
  height={1392/2.5}
  oversize
/>
<Caption style={{marginTop: '-40px'}}>A merge request deployment pipeline success message.</Caption>

The pipeline information shows the status as ZEIT Now builds your app. In this case, it has successfully built. It will show a different icon when ZEIT Now is building the app.

Below the pipeline message, a comment will present a [preview URL](/docs/v2/custom-domains#deploying-with-your-domain) that updates each time the merge request is pushed to, so you can share this link with others without having to worry about sharing the latest update.

<Image
  src={`${process.env.ASSETS}/guides/getting-started-with-now-for-gitlab/merge-request-alias.png`}
  width={2080/2.5}
  height={1392/2.5}
  oversize
/>
<Caption style={{marginTop: '-40px'}}>A preview URL created from a merge request.</Caption>

You can test this by creating another commit for the merge request and accessing the preview URL. You will notice that, once the commit is deployed, the preview URL will have been updated with the changes.

## Deploying to Production

Pushing or merging to the [default branch](https://docs.gitlab.com/ee/user/project/repository/branches/#default-branch) will result in a deployment, like any other branch or push. However, if you have a production domain set in the **Domains** section of your project dashboard, these deployments will be automatically available at your configured destination.

<Note>
  You can read more about adding domains, both preview and production, to
  deployments in the{' '}
  <Link href="/docs/v2/custom-domains#deploying-with-your-domain">
    custom domains documentation
  </Link>
  .
</Note>

When you push this change to the default branch, this and all subsequent commits to the branch will have the following comment, letting you know that your deployment is live in production.

<Image
  src={`${process.env.ASSETS}/guides/getting-started-with-now-for-gitlab/production-deployment.png`}
  width={2080/2.5}
  height={1392/2.5}
  oversize
/>
<Caption style={{marginTop: '-40px'}}>A preview URL created from a merge request.</Caption>

## In Conclusion

Through this guide, you should now have a bulletproof deployment pipeline for all of your GitLab projects, using [ZEIT Now for GitLab](/docs/v2/integrations/now-for-gitlab).

With every push, an automatic deployment. With every merge request, a unique preview URL. And with every update to the default branch, your changes are updated for the production domain.

export default ({ children }) => <Guide meta={meta}>{children}</Guide>

export const config = {
  amp: 'hybrid'
}
